<template>
  <view class="logoImage"><image class="Logo" src="../../static/image/Logo/logo.png"></image></view>
  <!-- style="background-size: 50% 53%; top: 220rpx; width: 200px ; height:140px;" -->
  <view class="zhuce_body">
    <view class="zhuce-container">
      <!-- TAB栏 -->

      <!-- zhuce表单 -->
      <form class="zhuce-form" @submit="zhuce">
        <!-- 表单输入框 -->
        <input type="text" placeholder="手机号" name="phone" v-model="regInfo.phone" class="input-field" />

        <input type="password" placeholder="请输入密码" name="password" v-model="regInfo.password" class="input-field" />

        <input type="password" placeholder="请重新输入密码" name="password" v-model="regInfo.cPassword" class="input-field" />

        <view class="verification-code">
          <input type="text" placeholder="请输入验证码" name="verificationCode" v-model="regInfo.verificationCode" class="input-field input-verification-code" />
          <view v-if="!counting" class="send-verification-code" @click="startCountdown" :class="{ disabled: counting }">
            {{ counting ? `${countdown}秒后重试` : '发送验证码' }}
          </view>

          <view v-else class="send-verification-code disabled">{{ countdown }}秒后重试</view>
        </view>

        <!-- 登录按钮 -->
        <button class="zhuce-button" form-type="submit">注册</button>
        <button @click="goLogin" class="zhuce-button-ce" style="margin-top: 10px;">返回登录</button>
      </form>

      <!-- 	{{phoneNumber}}
    {{password}}
    {{verificationCode}}
    {{chooseRole}} -->
    </view>
  </view>
</template>

<script>
// import { SendVerificationCodeRequest, registerApi } from '@/api/loginPageApi.js';

import { SendVerificationCodeRequest } from '@/api/SendVerificationCodeApi.js';
import { registerApi } from '@/api/registerApi.js';

export default {
  data() {
    return {
      // activeTab: 'password',//登录方式
      chooseRole: 'user', //登录时不改角色，默认角色为user
      counting: false, //是否倒计时中？
      countdown: 60, //倒计时长
      regInfo: {
        phone: '', //输入的手机号
        password: '', //输入的密码
        cPassword: '', //确认输入的密码
        verificationCode: '' //输入的验证码
      }
    };
  },

  methods: {
    goLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    /**
     * @param {Object} tab 切换登录方式
     */
    // switchTab(tab) {
    //   this.activeTab = tab;
    // },

    /**
     * 手机号校验
     */
    validatePhone() {
      // 长度校验
      if (this.regInfo.phone.length !== 11) {
        // 注意这里使用 !== 表示不等于
        return false;
      }

      // 格式校验，使用正则表达式进行判断
      const regex = /^[1-9]\d{10}$/; // 正则表达式匹配11位数字
      if (!regex.test(this.regInfo.phone)) {
        return false;
      }

      return true;
    },

    /**
			 *

			 * 密码校验
			 */
    validatePassword() {
      // 长度校验
      if (this.regInfo.password < 6 || this.regInfo.password > 20) {
        return false;
      }

      // 格式校验，这里使用正则表达式进行判断，可以根据需求进行修改
      const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]+$/; // 格式校验，要求包含大小写字母和数字
      if (!regex.test(this.regInfo.password)) {
        return false;
      }

      return true;
    },

    verificationCode() {
      // 长度校验
      if (this.regInfo.verificationCode.length !== 4) {
        // 注意这里使用 !== 表示不等于
        return false;
      }

      return true;
    },

    /**
     * @param {Object} message 提示框
     */
    showAlert(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      });
    },

    async zhuce(formData) {
      // 校验手机号和密码字段
      if (!this.validatePhone()) {
        this.showAlert('请输入有效的手机号');
        return;
      }

      if (!this.validatePassword()) {
        this.showAlert('请输入有效的密码');
        return;
      }
      if (this.regInfo.password !== this.regInfo.cPassword) {
        this.showAlert('两次密码输入不一致！');
        return;
      }

      // 18786434920  Ldy21787
      // this.showAlert('调用密码登录的接口');
      // PasswordLoginRequest();

      // 校验手机号和验证码字段
      if (!this.validatePhone()) {
        this.showAlert('请输入有效的手机号');
        return;
      }

      if (!this.verificationCode()) {
        this.showAlert('请输入验证码');
        return;
      }

      const res = await registerApi({
        phone: this.regInfo.phone,
        password: this.regInfo.password,
        code: this.regInfo.verificationCode
      });
      if (res.data.code == 200) {
        this.regInfo = {};
        uni.showToast({
          title: res.data.message,
          icon: 'success'
        });
        uni.navigateTo({
          url: '/pages/login/login'
        });
      } else {
        uni.showToast({
          title: res.data.message,
          icon: 'error'
        });
      }
      //   uni.request({
      //     // 发送到后端url中的login
      //     url: 'http://47.115.211.73:8080/register',
      //     method: 'POST',
      //     params: {
      //       phone: this.regInfo.phoneNumber,
      //       password: this.regInfo.password,
      //       code: this.regInfo.verificationCode
      //     },
      //     success(res) {
      //       console.log(res);
      // this.regInfo = {}
      //       this.showAlert('注册成功！');
      //     },
      //     fail(err) {
      //       console.log(err);
      //     }
      //   });
    },
    /**
     * @param {Object} e 切换角色
     */
    handleChange(e) {
      this.chooseRole = e.detail.value;
    },
    /**
     * 开始倒计时/发送验证码
     */
    async startCountdown() {
      // 校验手机号 18786434920
      if (!this.validatePhone()) {
        this.showAlert('请输入有效的手机号');
        return;
      }
      // this.showAlert('调用后端接口，通过运营商拿取验证码');
      uni.request({
        url: 'http://47.115.211.73:8080/code/user/' + this.regInfo.phone,
        method: 'GET',
        success(res) {
          uni.showToast({
            title: '发送验证码成功！',
            icon: 'success'
          });
          return res;
        },
        fail(err) {
          return res;
        }
      });
      // const res = SendVerificationCodeRequest(this.regInfo.phoneNumber);
      // console.log(res);
      // this.regInfo.verificationCode = res.data

      if (!this.counting) {
        this.counting = true;
        const timer = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown -= 1;
          } else {
            this.counting = false;
            this.countdown = 60; // 重置倒计时
            clearInterval(timer); // 清除定时器
          }
        }, 1000);
      }
    }
  }
};
</script>

<style lang="scss" scped>
.co {
  color: rgb(255, 182, 18);
}

.logoImage {
  .Logo {
    background-color: #333333;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -40%);
    width: 750rpx;
    height: 550rpx;
    z-index: 20;
  }
}

.zhuce_body {
  z-index: 9999;
  height: 100vh;
  background-color: #333333;
  display: flex;
  align-items: center;
}

.zhuce-container {
  z-index: 99;
  background-color: #333333;
  border-left: 1rpx solid #feb51d;
  border-right: 1rpx solid #feb51d;
  border-radius: 20rpx;
  // box-shadow: 10rpx 10rpx 8rpx #afafaf;
  box-sizing: border-box;
  padding: 50rpx;
  width: 600rpx;
  height: 750rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%); //绝对值由小到大==>左右 下上

  .tab-bar {
    display: flex;
    justify-content: space-around;
    font-size: 32rpx;

    .common {
      width: 200rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }

    .tab-active {
      color: #ffb612;
      // background-color: #E6F7FF;
      border-bottom: 7rpx #ffb612 solid;
    }
  }

  .zhuce-form {
    margin-top: 40rpx;

    .input-field {
      width: 100%;
      height: 80rpx;
      margin-top: 30rpx; //必须与verification-code的同一样式同步
      margin-bottom: 20rpx;
      padding: 10rpx;
      box-sizing: border-box;
      border-bottom: 1px solid #ffb612;
      color: white;
      // border-radius: 10rpx;
    }

    .verification-code {
      margin-top: 30rpx;
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      // 验证码输入框
      .input-verification-code {
        height: 80rpx;
        margin-bottom: 0;
        margin-top: 0;
        margin-right: 20rpx;
      }

      // 按钮
      .send-verification-code {
        height: 70rpx;
        width: 300rpx;
        padding: 0;
        font-size: 30rpx;
        color: white;
        border: none;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: rgb(255, 182, 18);
      }
    }

    .disabled {
      cursor: not-allowed; //当鼠标光标悬停在该元素上方时，光标将变为禁止符号
    }

    .radioGroup {
      margin: 30rpx 0;
      display: flex;
      justify-content: space-around;
    }

    .zhuce-button {
      width: 100%;
      height: 80rpx;
      background-color: rgb(255, 182, 18);
      color: white;
      border: none;
      border-radius: 10rpx;
      cursor: pointer;

      &:active {
        background-color: rgb(255, 182, 18);
      }
    }

    .zhuce-button-ce {
      width: 100%;
      height: 80rpx;
      background-color: #333333;
      color: rgb(255, 182, 18);
      border: none;
      border-radius: 10rpx;
      cursor: pointer;

      &:active {
        background-color: #333333;
      }
    }
  }
}
</style>
